<template>
  <el-container>
    <el-header class="auto"><goback :content="content"></goback></el-header>
    <el-main>
      <el-tabs type="border-card" v-model="tab" @tab-click="handleClick">
        <el-tab-pane>
          <span slot="label" name="0" v-if="waitCount.lx" class="mytab"><el-badge :value="waitCount.lx" class="flag">立项数据</el-badge></span>
          <span slot="label" name="0" v-else>立项数据</span>
          <projectListLx ref="projectListLx"></projectListLx>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label" name="1" v-if="waitCount.ys" class="mytab"><el-badge :value="waitCount.ys" class="flag">预算数据</el-badge></span>
          <span slot="label" name="1" v-else>预算数据</span>
         <projectListYs ref="projectListYs"></projectListYs>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label" name="2" v-if="waitCount.js" class="mytab"><el-badge :value="waitCount.js" class="flag">结算数据</el-badge></span>
          <span slot="label" name="2" v-else>结算数据</span>
          <projectListJs ref="projectListJs"></projectListJs>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>

</template>

<script>
    import projectListLx from '@/components/project/project_list_lx'
    import projectListYs from "@/components/project/project_list_ys";
    import projectListJs from "@/components/project/project_list_js";
    import goback from "../common/goback";
    import {mapState,mapActions} from 'vuex'
    export default {
        name: "project_list",
        data(){
            return {
                    content:"立项",
                    tab:'0',
                    tablist:['立项','预算','结算'],
                    form: {
                        name: '',
                        create_user: '',
                        status: 0,
                        date: '',
                        batch_id: '',
                        page: 1,
                        page_size: 10,
                        type: 1,
                    },
                form_lx: {
                    name: '',
                    created_user: '',
                    status: 0,
                    date: '',
                    batch_id: '',
                    start: '',
                    stop: '',
                    page: 1,
                    page_size: 10,
                },
                }

        },

      //监听路由参数变化
      watch:{
          '$route.query'(nweQuery,oldQuery){
            let route = nweQuery;
            if(route.hasOwnProperty('tab'))this.tab = route.tab
            this.handleTab(this.tab)
          },
      },

        methods:{
            ...mapActions('ProjectData',['getProjectLxActions','getProjectYsActions','getProjectJsActions']),
            goBack(){
                this.$router.push('/home');
            }
            ,handleTab(index){
            index = parseInt(index)
            let route = this.$route.query;
            let status = 0;
            let keywords = '';
            console.log(route)
            if(route.hasOwnProperty('keywords')) keywords = route.keywords;
            if(route.hasOwnProperty('status')) status = route.status;
            switch(index){
              case 1:
                this.$refs.projectListYs.form.status = parseInt(status)
                this.content = '预算'
                this.form.type = 1
                this.form.status = status
                if(keywords)this.form.name = keywords
                this.getProjectYsActions(this.form)
                break;
              case 2:
                this.$refs.projectListJs.form.status = parseInt(status)
                this.content = '结算'
                this.form.type = 2
                this.form.status = status
                if(keywords)this.form.name = keywords
                this.$refs.projectListJs.getList(this.form)
                break;
              default:
                this.$refs.projectListLx.form.status = parseInt(status)
                this.content = '立项'
                this.form_lx.status = status
                if(keywords)this.form_lx.name = keywords
                this.getProjectLxActions(this.form_lx)
                break;
            }
          }

            ,handleClick(tab){
             this.handleTab(tab.index)
            },

        },
        components:{projectListLx,projectListYs,projectListJs,goback},
        computed:{
            ...mapState('ProjectData',['waitCount']),
        },

        mounted() {
       let route = this.$route.query;
       if(route.hasOwnProperty('tab')){
         this.tab = route.tab
         this.handleTab(route.tab)
       }
      },

    }
</script>

<style scoped>
.flag{margin-top: 5px;margin-right: 20px;}
.mytab{display: block;line-height: 30px;}
</style>
